import React from 'react';
import { HashRouter as Router, withRouter, NavLink, Route, Redirect } from 'react-router-dom';
import { Layout, Menu, Switch } from 'antd';
import { Icon } from '@ant-design/compatible';
import { createBrowserHistory } from "history";
// import Item from 'antd/lib/list/Item';
import DinPlan from './DinPlan';
const { Header, Sider, Content } = Layout;
const { Item } = Menu;
class OrderMeue extends React.Component {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    render() {
        return (
            <Layout>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        <Menu.Item key="1">
                            <Icon type="user" />
                            <span>内部管理</span>
                        </Menu.Item>
                        <Menu.Item key="2">
                            {/* <NavLink> */}
                            <Icon type="video-camera" />
                            <span>订餐服务</span>
                            {/* </NavLink> */}
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Icon type="upload" />
                            <span>表单申请</span>
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout>
                    <Header style={{ background: '#fff', padding: 0 }}>
                        <Icon
                            className="trigger"
                            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                            onClick={this.toggle}
                        />
                    </Header>
                    <Content
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            background: '#fff',
                            minHeight: 880,
                        }}
                    >
                        <span>订餐服务</span>
                        <div className="container-layout">
                            
                                <Menu mode="horizontal">
                                    <Item>
                                        <NavLink to='/dinPlan'>订餐申请</NavLink>
                                    </Item>
                                    <Item>
                                        <NavLink to='/dinReocord'>个人详情</NavLink>
                                    </Item>
                                </Menu>
{/*                                 
                                <div className="content-layout">
                                <Router  history={createBrowserHistory()}>
                                    <Switch>
                                        <Route path='/dinPlan' component={DinPlan} />
                                        <Route exact path='Order/dinReocord' render={() => <dinRecord />} />
                                        <Redirect />
                                    </Switch>
                                    </Router>
                                </div> */}
                           
                        </div>
                    </Content>
                </Layout>
            </Layout >
        );
    }
}


export default withRouter(OrderMeue);